<template>
  <view class="py-12px">
    <view class="form-line">
      <view class="label">收货人</view>
      <input v-model="form.name" placeholder="请输入" />
    </view>
    <view class="form-line">
      <view class="label">电话</view>
      <input v-model="form.phone" placeholder="手机号码" />
    </view>
    <view class="form-line">
      <view class="label">选择地区</view>

      <view @click="popup = true">
        <view>{{ regionInfo || "请选择" }}</view>
      </view>

      <view class="form-position"> </view>
    </view>
    <view class="form-line mb-8px">
      <view class="label">详细地址</view>
      <input v-model="form.detailAddress" placeholder="街道 门牌信息" />
    </view>
    <view class="form-line justify-between mb-8px">
      <view class="label">设为默认地址</view>
      <oreo-switch
        v-model:checked="form.defaultFlag"
        size="25px"
        active-color="#2356C3"
        @change.stop="form.defaultFlag = !form.defaultFlag"
      />
    </view>
    <view v-if="form.id" class="form-line">
      <view
        class="label font-bold"
        style="color: #2356c3"
        @click.stop="onDelete"
        >删除收货地址</view
      >
    </view>
    <view class="address-action">
      <button @click.stop="onSubmit">保存</button>
    </view>

    <oreo-popup
      position="bottom"
      :show="popup"
      custom-style="height: 550rpx;"
      @clickOverlay="popup = false"
      :overlay="true"
    >
      <custom-address @close="popup = false" @confirm="handleChooseLocation" />
    </oreo-popup>
  </view>
 
   
</template>

<script setup>
import { computed, reactive, ref } from "vue";
import { AddAddress, DeleteAddress, EditAddress } from "@/services/address";
import { onLoad, onReady } from "@dcloudio/uni-app";
import { message, ossImg } from "@/utils/utils";
import CustomAddress from "@/components/custom-address";
import privacyPopup from "@/components/privacy-popup";

const form = reactive({
  defaultFlag: true,
});

const popup = ref(false);

const regionInfo = computed(() => {
  const { province, city, region } = form;
  return [province, city, region].filter((v) => v).join("");
});

onLoad((option) => {
  if (option.edit) {
    uni.setNavigationBarTitle({
      title: "编辑地址",
    });
    Object.assign(form, JSON.parse(uni.getStorageSync("ADDRESS_INFO")));
  }
  getApp().accessLogAdd();
});

const onSubmit = async () => {
  const { name, phone, detailAddress, city } = form;
  if (!name) return message("请填写收货人姓名");
  if (
    !phone ||
    !/^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[3-8]{1})|(18[0-9]{1})|(19[0-9]{1})|(14[5-7]{1}))+\d{8})$/.test(
      phone
    )
  )
    return message("请填写正确的联系电话");
  if (!detailAddress || !city) return message("请填写收件地址");
  await (form.id ? EditAddress : AddAddress)(form);
  uni.navigateBack({ delta: 1 });
};

const onDelete = () => {
  uni.showModal({
    title: "删除收货地址",
    content: "点击确认将删除该收货地址",
    success: async (res) => {
      if (res.confirm) {
        await DeleteAddress(form.id);
        uni.navigateBack({ delta: 1 });
      }
    },
  });
};

const handleChooseLocation = (e) => {
  console.log(e);
  Object.assign(form, {
    province: e[0],
    city: e[1],
    region: e[2],
    detailAddress: "",
  });
  // uni.chooseLocation({
  //   success: (result) => {
  //     if (!result.address) return;
  //     const _address = result.address
  //       .match(/.+?(省|市|自治区|自治州|县|区)/g)
  //       .filter((v) => v);
  //     if (!_address || !_address.length) return;
  //     // 处理直辖市
  //     if (_address.length !== 3) _address.unshift("");
  //     Object.assign(form, {
  //       province: _address[0],
  //       city: _address[1],
  //       region: _address[2],
  //       detailAddress: _address[_address.length - 1]
  //         ? result.address.split(_address[_address.length - 1])[1]
  //         : "",
  //       address: _address,
  //     });
  //   },
  // });
};
</script>

<style lang="less" scoped>
@import "@/static/css/theme.less";

.address-action {
  padding: 52px 0;

  button {
    width: 334px;
    height: 44px;
    line-height: 44px;
    background: #2356c3;
    border-radius: 22px;
    margin: 0 auto;
    color: white;
    font-size: 14px;

    &::after {
      border: none;
    }
  }
}

.form-line {
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  background: #ffffff;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid #e8e8e8;

  .label {
    width: 80px;
    color: #010101;
    font-size: 14px;
    white-space: nowrap;
    font-weight: bold;
  }

  picker {
    font-size: 14px;
    flex: 1;
    padding-right: 12px;
  }

  oreo-switch {
    height: 25px;
  }

  .form-position {
    font-size: 16px;
    color: @primary-color;
    display: flex;
    align-items: center;

    image {
      width: 16px;
      height: 16px;
      display: block;
      margin-right: 3px;
    }
  }
}
</style>
